<!--留宿-->
<template>
  <div class="log">
    <basic-container>
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange">
        <template slot="menu" slot-scope="scope">
          <!--自定义留宿按钮-->
          <el-button
              class="filter-item"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="handle(scope.row)">留宿
          </el-button>
        </template>
      </avue-crud>
      <!--自定义留宿弹窗-->
      <el-dialog
          :visible.sync="dialogEditVisible"
          title="留宿操作"
          width="35%"
          @close="dictItemVisible"
          :close-on-click-modal="false">
        <el-form :rules="rules">
          <!--获取当前行的年级，班级，姓名-->
          <h3 ref="tableData">
            {{ this.currentrow.parentName + this.currentrow.deptName + this.currentrow.personName }}</h3>
          <el-form-item label="留宿开始时间" prop="startTime">
            <el-col :span="6">
              <el-date-picker
                  v-model="startTime"
                  format="yyyy-MM-dd"
                  :placeholder="dialogStatus ==='view'?'':'请选择留宿开始时间'"
                  :picker-options="startDatePicker"
                  :disabledDate="this.startTime"
                  :disabled="dialogStatus ==='view'"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="留宿结束时间" prop="endTime">
            <el-col :span="6">
              <el-date-picker
                  v-model="endTime"
                  format="yyyy-MM-dd"
                  :placeholder="dialogStatus ==='view'?'':'请选择留宿结束时间'"
                  :picker-options="endDatePicker"
                  :disabledDate="this.startTime"
                  :disabled="dialogStatus ==='view'"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
            <el-col :span="24">
              <p style="color: red">仅在指定日期范围内具有原本通行时间方案的通行权限,留宿时间从当日00:00生效,过期后自动恢复正常通行时间方案</p>
            </el-col>
          </el-form-item>
          <el-form-item label="分配时间组" prop="timeDormId">
            <el-col :span="15">
              <el-select v-model="value" placeholder="请选择" style="margin-left: 20px">
                <el-option
                    v-for="item in timeOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="24" style="text-align: center">
              <el-button
                  class="filter-item"
                  size="small"
                  @click="dictItemVisible">取消
              </el-button>
              <el-button
                  class="filter-item"
                  size="small"
                  type="primary"
                  @click="handleUpdate()">确认
              </el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {EditStayHostObj, stayHostObj} from '@/api/hostel/stayHost'
import {timePlan} from '@/api/pass/timeplan'
import {mapGetters} from 'vuex'
import {HOSTEL_OUT, HOSTEL_SEX} from '@/const/Hostel'
import {PERSON_DETAILS} from "@/const/personDict";


export default {
  name: 'stayHost',
  data() {
    return {
      dialogStatus: '',
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      dialogEditVisible: false, //定义留宿操作弹窗
      currentrow: {},
      startTime: '',
      endTime: '',
      tableData: [],
      searchForm: {},
      timeOption: [{
        value: '',
        label: '',
      }],
      value: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      // tableOption: tableOption,
      rules: {  //必填项（验证规则）
        timeDormId: [
          {required: true, trigger: "none"}
        ],
        startTime: [
          {required: true, trigger: "none"}
        ],
        endTime: [
          {required: true, trigger: "none"}
        ],
      },
      tableOption: {
        border: true,  //竖线边框
        index: true,  //表格序号
        indexLabel: '序号',  //序号的标题
        stripe: true,  //是否显示表格的斑马条纹
        menuAlign: 'center',  //菜单栏对齐方式
        menuWidth: 180,  //操作菜单栏的宽度
        align: 'center',  //表格列对其方式
        emptyBtnText: '重置', //清空按钮文案
        searchMenuSpan: 6,  //搜索框长度
        // searchSpan: 5,
        addBtn: false,  //添加按钮
        delBtn: false,  //行内删除按钮
        editBtn: false,  //行内编辑按钮
        viewBtn: false,  //是否显示查看按钮
        selection: false,  //表格是否显示可选
        excelBtn: false,  //表格导出按钮是否显示
        refreshBtn: true,  //表格上面小的 刷新按钮
        columnBtn: true,  //表格上面小的 列表显隐按钮
        searchBtn: true,  //搜索按钮
        menuType: 'button',//操作栏样式为按钮
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '人员id',  //字段标题
            prop: 'studentid',  //字段名称
            search: false,  //搜索是否显示
            hide: true,  //展示页面是否显示
            viewDisplay: false,  //详情时是否显示
          },
          {
            label: '姓名',
            prop: 'personName',
            search: true,
            dicData: HOSTEL_OUT,  //引入字典
          }, {
            label: '学号',
            prop: 'number',
            dicData: HOSTEL_OUT,
          }, {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',  //搜索框显示类型
            dicData: HOSTEL_SEX,
            change: (value) => {
              this.searchForm.sex = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '校区',
            prop: 'campusDeptArea',
            dicData: PERSON_DETAILS,
            editDisplay: false,
          },{
            label: '年级',
            prop: 'parentName',
            dicData: HOSTEL_OUT,
          },
          {
            label: '年级',
            prop: 'pid',
            search: true,
            type: 'select',
            hide: true,
            // searchClearable: false,
            defaultExpandAll: true,
            dicUrl: '/admin/dept/PermissionTree',
            cascaderItem: ['deptId'],
            dicFormatter: (res) => {
              let gradeArr = res.data
              let value = []
              if(gradeArr.length> 0){
                for(let i of gradeArr){
                  if(i.typeNum == "2" && i.isLock === false){
                    value.push(i)
                  }
                }
                console.log(value)
                return value
              }
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'id'
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '班级',
            prop: 'deptName',
            dicData: HOSTEL_OUT,
          },
          {
            label: '班级',
            prop: 'deptId',
            search: true,
            filter: false,
            type: 'select',
            hide: true,
            // searchClearable: false,
            defaultExpandAll: true,
            dicUrl: '/campus/sysdept/detpTree/{{key}}/1,2,3',
            dicFormatter: (res) => {
              // console.log(res.data[0].children)
              return res.data[0].children;//返回字典的层级结构
            },
            dicMethod: 'get',
            props: {
              label: 'name',
              value: 'deptId',
            },
            change: (value) => {
              this.searchForm.deptId = value.value
              this.getList(this.page, this.searchForm)
            },
          },
          {
            label: '楼栋',
            prop: 'buildingName',
            dicData: HOSTEL_OUT,
          },
          {
            label: '楼栋',
            prop: 'buildingId',
            search: true,
            hide: true,
            type: 'select',
            dicUrl: '/campus/building/selectAll',
            dicMethod: 'get',
            props: {
              label: 'buildingName',
              value: 'buildingId'
            },
            change: (value) => {
              this.searchForm.buildingId = value.value
              this.getList(this.page, this.searchForm)
            },
          }, {
            label: '宿舍号',
            prop: 'dormNumber',
            search: true,
            dicData: HOSTEL_OUT,
          },
          {
            label: '修改操作人',
            prop: 'operator',
          },
          // {
          //   label: '年级/班级',
          //   prop: 'deptId',
          //   search: true,
          //   filter: false,
          //   type: 'tree',
          //   hide: true,
          //   dicUrl: '/campus/sysdept/detpTree/1/2,3',
          //   dicMethod: 'get',
          //   // dicData: [],
          //   props: {
          //     label: 'name',
          //     value: 'deptId',
          //   },
          //   change: (value) => {
          //     if (value.value === '') {
          //       return;
          //     }
          //     this.searchForm.deptId = value.value
          //     this.getList(this.page, this.searchForm)
          //   },
          // },
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {
    beginDate() {
      const  self = this
      return {
        disabledDate(time) {
          return time.getTime() <= new Date().getTime() - 3600 * 1000 * 24;
        }
      }
    },
    processDate() {
      const  self = this
      return {
        disabledDate(time) {
          if (self.startTime !== '') {  //如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.startTime).getTime() > time.getTime() - 3600 * 1000 * 24;
          }
        }
      }
    },

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      stayHostObj(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },


    //留宿弹窗相关
    dictItemVisible: function () {
      this.dialogEditVisible = false
      this.value = ''
    },

    handle: function (row) {
      this.dialogEditVisible = true
      this.startTime = null
      this.endTime = null
      this.currentrow = row
      let param = {
        timeType: 1,
        size: 999,
      }
      timePlan(param).then(res => {
        this.timeData = res.data.data.records
        this.timeOption = this.timeData.map(item => {
          return {value: `${item.id}`, label: `${item.timePlanName}`};
        })
        console.log(this.timeOption)
      })
    },

    //留宿的操作及弹窗
    handleUpdate: function () {
      if (this.startTime === null) {
        this.$message.error('提交失败,请选择留宿开始时间')
        return;
      }
      if (this.endTime === null) {
        this.$message.error('提交失败,请选择留宿结束时间')
        return;
      }
      if (this.value === '') {
        this.$message.error('提交失败,请选择要分配的时间组')
        return;
      }
      if (this.startTime >= this.endTime) {
        this.$message.error('提交失败,留宿结束时间需大于留宿开始时间')
        return;
      }
      this.timeDormId = this.value
      EditStayHostObj(this.currentrow, this.startTime, this.endTime, this.timeDormId).then(res => {
        this.getList(this.page)
        this.dialogEditVisible = false
        this.$message.success('留宿成功！')
        this.startTime = null
        this.endTime = null
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      if (form.pid !== undefined && form.deptId === undefined) {
        form.deptId = form.pid
        // console.log(form.deptId)
        this.getList(this.page, form)
        done()
      }
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },

    //清空时重置页面
    searchReset(){
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.avue-crud__menu{
  display: none;
}
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row {
  padding-left: 2px !important;
  padding-right: 36px !important;
}
/deep/.avue-form__menu--center{
  text-align: left;
}
</style>
